<template>
    <div class="container">
         <!--头部导航条-->
        <div class="nav">
            <div style="margin-left:30px">
                <ul v-if="userTel==null" class="navul">
                    <li  @click="gohomepage">
                        <van-icon name="wap-home" color="#FF4400" />闲呗首页
                    </li>
                    <li><a class="mylogingo" @click="goLogin">登录</a>&nbsp;/&nbsp;<a @click="gozce">注册</a></li>
                    <li>退出</li>
                </ul>
                <ul v-else class="navul">
                    <li  @click="gohomepage">
                        <van-icon name="wap-home" color="#FF4400" />闲呗首页
                    </li>
                    <li>欢迎你：{{this.userTel}}</li>
                    <li @click="tuichu">退出</li>
                </ul>
            </div>
            <div style="float: right;">
                <ul class="navultow">
                    <li @click="gomycenter" class="mycb1"><a class="myxb">我的闲呗</a>
                        <div class="hen"></div>
                        <ul class="second">
                            <li><a class="second1">我已买到的宝贝</a></li>
                            <li class="second1">我已卖出的宝贝</li>
                        </ul>
                    </li>
                    <!-- <li>
                        <van-icon name="shopping-cart-o" color="#FF4400" />购物车<div class="hen"></div>
                    </li> -->
                    <li>
                        <van-icon name="star" color="#FF4400" />收藏夹<div class="hen"></div>
                    </li>
                    <!-- <li>
                        手机版<div class="hen"></div>
                    </li> -->
                    <li @click="gocustomerchat()" >联系客服<div class="hen"></div>
                    </li>
                    <li>商家中心</li>

                </ul>
            </div>
        </div>
        <div class="content">

            <!-- 左侧 -->
            <div class="left" >
                <!-- 放大镜 -->
                <div class="left1" v-if="goodsArr.length!=0"><!-- 父容器 -->
                    <div class="even"></div><!-- 鼠标移入的地方 -->
                    <img :src="goodsArr[0].commodityImg"  id="detail"><!-- 主图 -->
                    <div class="big">
                        <img :src="goodsArr[0].commodityImg" id="detail1" ><!-- 主图放大图 -->
                    </div>
                    <div class="mask"></div><!-- 遮罩层 -->
                </div>
                
                <div class="left2" >
                    <!-- 详情图切换主图 -->
                    <ul id = "smUl">
                        <li v-for="(item,index) in goodsArr" :key="index"> <img class="img1" :src="item.imgUrl" :data="item.imgUrl"> </li>
                    </ul>
                </div>
                
                <!-- 收藏商品 -->
                <div class="left3" >
                    <van-icon name="star" :color="collectColor" @click="collect() "/><span>收藏宝贝</span>
                </div>
            </div>
                

            <!-- 中间 -->
            <div class="middle" v-if="goodsArr.length!=0">
                <div>{{goodsArr[0].commodityName}}</div>
                <div><van-tag round type="primary">二手</van-tag> <span >让二手游起来</span></div>
                <div>
                    <div>
                        价格:<span style="color:red;font-size:25px">￥{{goodsArr[0].currentPrice}}</span>  <span style="text-decoration:line-through;color:gray">￥{{goodsArr[0].originalPrice}}</span> 
                    </div>                   
                </div>
                <div>
                     <div><span >优惠:</span> <span><i class="el-icon-s-custom" style="color:gold"></i>淘金币最高可抵商品价2%</span></div>
                </div>
                <div>
                    <span>配送：</span><span>{{goodsArr[0].address}}</span> <span>快递免运费</span>
                </div>
                <div>
                    <p>类型:</p> <span>
                            <el-radio-group v-model="radio1" size="small">
                                <el-radio-button label="默认"></el-radio-button>
                            </el-radio-group>
                        </span>
                </div>
                <div>
                    <p>规格:</p> <span>
                            <el-radio-group v-model="radio2" size="small">
                                <el-radio-button label="默认"></el-radio-button>
                            </el-radio-group>
                        </span>
                </div>

                <!-- 步进器 -->
                <div>
                    <span>数量:</span> <el-input-number v-model="num" :disabled="true" size="mini"></el-input-number>
                </div>

                <!-- 花呗分期 -->
                <div>
                     <p>花呗分期:</p> <span>
                            <el-radio-group v-model="radio3">
                                <el-radio-button label="3期(含手续费)"></el-radio-button>
                                <el-radio-button label="6期(含手续费)"></el-radio-button>
                                <el-radio-button label="12期(含手续费)"></el-radio-button>
                            </el-radio-group>
                        </span>
                </div>

                <!-- 立即购买-->
                <div>
                     <van-button color="linear-gradient(to right, #ff6034, #ee0a24)">分期购买</van-button>
                    <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" style="margin-left: 40px;" @click="purchase()" :disabled="buttonState">立即购买</van-button>
                </div>

                <!-- 承若 -->
                <div>
                    <span>承诺</span> <span><van-icon name="friends" color="gold" />7天无理由</span>  <span><van-icon name="logistics" color="gold" />运费险</span>
                </div>

                <div>
                    <span>支付</span> <span><van-icon name="wechat-pay" color="green" />微信支付</span>  <span><van-icon name="alipay" color="blue" />支付宝</span>
                </div>
               
            </div>

            <!-- 右侧 -->
            <div class="right" v-if="hotelArr.length!=0">
                <div  class="right1">
                    <img src=http://112.74.185.144:8000/files/yCE1667392235.png alt="">
                    <div style="margin-left:15px">
                        <p style="font-weight:bold">掌柜:{{hotelArr[0].userName}}</p>
                        <p>信誉:<span> <img  v-for="(num,index) in hotelArr[0].creditScore" :key="index" src=http://112.74.185.144:8000/files/S7H1667392242.gif> </span></p>
                        <p @click="gochat()" style="display:flex;cursor: pointer;"> <span>联系：</span> <span><van-tag type="primary">和我联系</van-tag></span> </p>
                         <p><van-icon name="gem" :color="collectStore" @click="collectStore2()"/><span>收藏店铺</span></p>
                        <p><img src=http://112.74.185.144:8000/files/XgH1667392238.png alt=""></p>
                    </div>

                </div>
                <div class="right2">
                    <div>
                        <span style="font-weight:bold">看了又看</span> <span><i class="el-icon-refresh-right"></i></span>
                    </div>

                    <div class="right3">
                        <div v-for="(item,index) in seeArr" :key=index>
                            <img :src="item.commodityImg">
                            <p>￥{{item.originalPrice}}</p>
                        </div>
                       
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="footer" v-if="goodsArr.length!=0">
            <el-tabs type="border-card">
                <el-tab-pane label="宝贝详情">
                    <p style="font-size:25px">{{goodsArr[0].describe}}</p>
                    <div v-for="(item,index) in goodsArr" :key=index>
                        <img :src="item.imgUrl">
                    </div>
                </el-tab-pane>
                <el-tab-pane label="评价" >
                    <div class="footer1" v-for="(item,index) in contentsArr" :key=index>
                        <div>
                            <img :src="item.userPhoto" alt="">
                            <p>用户:{{item.userTel}}</p>
                        </div>
                        <div>
                            <van-rate v-model="item.scoreToSeller" readonly style="margin-top:20px" />
                            <div v-show="item.commentImg.length>0" class="img2"><img :src="item.commentImg"></div>
                            <div style="margin-top:15px" >{{item.commentsToSeller}}</div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
    export default {
        data() {
            return{
                starttime:'',   //开始时间

                endtime:'',     //结束退出时间

                shoppitem:'' ,  //点击商品块的详细信息

                seachitem:'',

                commodityId:'',

                // 商品详情数组
                goodsArr:[],

                // 卖家数组
                hotelArr:[],

                // 评论数组
                contentsArr:[],

                // 看了又看
                seeArr:[],

                // 单选框
                radio1: '上海',
                radio2: '上海',
                radio3: '上海',
                radio4: '上海',
                
                // 步进器
                num: 1,

                // 收藏图标颜色
                collectColor: "red",

                // 收藏店铺颜色
                collectStore:"gold",

                // 禁用立即购买按钮
                buttonState:false,

                // 评分
                value:5,
                
                userTel:sessionStorage.getItem('userTel'),

                


            }
        },
        methods: {
            // 聊天
            gochat(){
                console.log(localStorage.getItem("hx220408userTel"),210);
                this.$router.push({
                    path:`/UserChat/${localStorage.getItem("hx220408userTel")}`
                })
            },
            //浏览商品插入浏览记录表的方法
            BrowsingHistory(){      
                this.$axios({
                    url:'/api/browsingTableinsert/get',
                    method:'get',
                    params:{
                        shoppid:localStorage.getItem("hx220408commodityId"),
                        userid:this.userTel,     //用户
                        statime:this.starttime,
                        endtime:this.endtime 
                    },
                })
                .then(resp=>{
                    console.log(resp.data,1111)
                })
                .catch(err=>{
                        console.log(err.data)
                    })
            },
            // 步进器
            handleChange(value) {
                console.log(value);
            },

            //拿到商品详情表数据
            getGoodsData(){
                this.$axios({
                    url:"/api/imgTable/get",
                    methods:"get",
                    params:{
                        commodityId:localStorage.getItem("hx220408commodityId")
                    }
                })
                .then(resp=>{
                    console.log(resp.data.data,199)
                    this.goodsArr=resp.data.data
                    let commodityId =this.goodsArr[0].commodityId
                    sessionStorage.setItem("commodityId",commodityId)
                   
                    
                    // 放大镜 ！！
                    let self = this;
                    setTimeout(()=>{
                        self.fdj()
                    },1000)
                    // this.fdj()

                    // 修改按钮状态
                    if(resp.data.data[0].state==0){
                        this.buttonState=false
                    }else if(resp.data.data[0].state==1){
                        this.buttonState=true
                    }

                })
                .catch(err=>{
                    console.log(err)
                })
            },

            // 放大镜
            fdj(){
                // 商品详情图切换
                var imgs = document.getElementsByClassName("img1"); //再通过ul的引用对象得到img的引用对象
                for (var i = 0; i < imgs.length; i++) {//遍历注册事件
                    imgs[i].onmouseover = function(){
                        // 小图
                        var bigImg = document.getElementById("detail");
                        bigImg.src = this.getAttribute("data");
                        // 大图
                        var bigImg1 = document.getElementById("detail1");
                        bigImg1.src = bigImg.src;
                    }
                }
            
                // 放大镜
                let even = document.querySelector('.even')//移入的地方
                let mask = document.querySelector('.mask')//遮罩层
                let big = document.querySelector('.big img') //大图
                even.onmousemove = function (e){
                    e = event || window.event
                    
                    //当前鼠标在 元素的X轴的位置 - 遮罩层的宽度/2 = 鼠标的X轴位置在遮罩层的中间
                    let left = e.offsetX - mask.offsetWidth/2 
                    let top = e.offsetY - mask.offsetHeight/2
                    
                    // 鼠标移入限制的范围
                    if(left<=0) left=0
                    if(left>=mask.offsetWidth-10) left = mask.offsetWidth
        
                    if(top<=0) top=0
                    if(top>=mask.offsetHeight-10) top = mask.offsetHeight
        
                    // 修改遮罩层的位置
                    mask.style.left = left + 'px'
                    mask.style.top = top + 'px'
                    // 修改大图的位置:  让大图向左移动
                    // 大图是小图的 2 倍，想让大图移动，就得 -2 * left
                    big.style.left = -2* left + 'px'
                    big.style.top = -2* top  +'px'
                }
            },

            //拿到店家信息
            getHotel(){
                this.$axios({
                    url:"/api/userTable/get",
                    methods:"get",
                    params:{
                        userTel:localStorage.getItem("hx220408userTel")
                    }
                })
                .then(resp=>{
                    console.log(resp.data.data,268)
                    this.hotelArr=resp.data.data
                })
                .catch(err=>{
                    console.log(err)
                })
            },

            // // 立即购买
            // buy(){
            //     // console.log(this.goodsArr,279)
            //     this.$axios({
            //         url:"/api/orderTable/get",
            //         methods:"get",
            //         params:{
            //             commodityId:this.goodsArr[0].commodityId,  //商品id
            //             sellerTel:this.hotelArr[0].userTel,      //卖家的电话号码
            //             orderPrice:this.goodsArr[0].currentPrice,  //订单价格
            //             orderState:0 //订单状态
            //         }
            //     })
            //     .then(resp=>{
            //         console.log(resp.data,291)
                     
            //         // 修改立即购买按钮状态
            //         this.buttonState=true
            //         Toast("商品已售完")
                   
            //          //修改商品状态
            //             this.$axios({
            //             url:"/api/updateState/get",
            //             methods:"get",
            //             params:{
            //                 commodityId:localStorage.getItem("hx220408commodityId")
            //             }
            //             })
            //             .then(resp=>{
            //                 // console.log(resp.data.data,300)
            //                 this.goodsArr=resp.data.data
            //             })
            //             .catch(err=>{
            //                 console.log(err)
            //             })
                
            //     })
            //     .catch(err=>{
            //         console.log(err)
            //     })

            // },

            // 查询收藏宝贝信息
            selectCollect(){
                this.$axios({
                    url:"/api/selectCollect/get",
                    methods:"get",
                    params:{
                        commodityId:localStorage.getItem("hx220408commodityId"),
                        userTel:sessionStorage.getItem('userTel')
                    }
                })
                .then(resp=>{
                    // console.log(resp.data.data,268)
                    if(resp.data.data.length>0){
                       this.collectColor="red"
                    }else{
                        this.collectColor="grey"
                    }
                })
                .catch(err=>{
                    console.log(err)
                })
            },
            

            // 收藏商品
            collect(){
                if(sessionStorage.getItem('userTel')=="" ||sessionStorage.getItem('userTel')==null){
                    Toast("请先登录")
                    return
                }
                this.$axios({
                    url:"/api/collectionTable/get",
                    methods:"get",
                    params:{
                        commodityId:localStorage.getItem("hx220408commodityId") ,
                        userTel:sessionStorage.getItem('userTel')
                        
                    }
                })
                .then(resp=>{
                    console.log(resp.data,268)
                    if(this.collectColor == 'red'){
                        this.collectColor = 'grey';
                        Toast("取消收藏成功")
                    }else if(this.collectColor == 'grey'){
                        this.collectColor = 'red';
                        Toast("收藏成功")
                    }
                })
                .catch(err=>{
                    console.log(err)
                })
            },



            // 查询收藏店铺信息
            collectStore1(){
                this.$axios({
                    url:"/api/collectStore1/get",
                    methods:"get",
                    params:{
                       beFocuson:localStorage.getItem("hx220408userTel"),  //卖家电话
                       follower:sessionStorage.getItem('userTel')  //买家电话
                    }
                })
                .then(resp=>{
                    // console.log(resp.data,409)
                    if(resp.data.data.length>0){
                        this.collectStore="gold"
                    }else{
                        this.collectStore="grey"
                    }
                })
                .catch(err=>{
                    console.log(err)
                })
            },

            // 收藏店铺
            collectStore2(){
                if(sessionStorage.getItem('userTel')=="" ||sessionStorage.getItem('userTel')==null){
                    Toast("请先登录")
                    return
                }
                this.$axios({
                    url:"/api/collectStore2/get",
                    methods:"get",
                    params:{
                       beFocuson:localStorage.getItem("hx220408userTel"),  //卖家电话
                       follower:sessionStorage.getItem('userTel')  //买家电话
                    }
                })
                .then(resp=>{
                    console.log(resp.data,433)
                    if(this.collectStore=="gold"){
                        this.collectStore="grey"
                        Toast("取消收藏成功")
                    }else if(this.collectStore=="grey"){
                        this.collectStore="gold"
                        Toast("收藏成功")
                    }
                })
                .catch(err=>{
                    console.log(err)
                })
            },

            //立即购买
            purchase(){
                 if(sessionStorage.getItem('userTel')=="" ||sessionStorage.getItem('userTel')==null){
                    Toast("请先登录")
                    return
                }
                this.$router.push("CloseView")
            },

            // 看了又看
            see(){
                this.$axios({
                    url:"/api/commodityTable1/get",
                    method:"get",
                    params:{
                        index:0,  
                        start:0, //数据开始位置
                        size:4,  //一页有几条数据
                    }
                })
                .then(resp=>{
                    console.log(resp.data.data,501)
                    this.seeArr=resp.data.data

                })
                .catch(err=>{
                    console.log(err)
                })
            },

            // 评价内容
            contents(){
                this.$axios({
                    url:"/api/selectEvaluate/get",
                    methods:"get",
                    params:{
                        acc:localStorage.getItem("hx220408userTel")
                    }
                })
                .then(resp=>{
                    console.log(resp.data.data,497)
                    this.contentsArr=resp.data.data
                })
                .catch(err=>{
                    console.log(err)
                })
            },

            // 跳转登录
            goLogin(){
                this.$router.push({name:'Login'})
            },

            // 跳转注册
            gozce(){
                this.$router.push({name:'Register'})
            },

            //退出登录的方法
            tuichu(){
                sessionStorage.removeItem('userTel')

            },

            //到个人中心
            gomycenter(){
                if(sessionStorage.getItem('userTel')==null){
                    this.$router.push({
                        name:'Login'
                    })
                }else{
                    this.$router.push({
                        name:'MyCenter'
                    })
                }
            },
            //去客服聊天
            gocustomerchat(){  
                if (sessionStorage.getItem('userTel')) {
                    this.$router.push({name: 'CustomerChat'})
                }
            },

              // 跳转首页
            gohomepage(){
                this.$router.push('/')

            }



        },


        mounted(){  
            window.scrollTo(0,0);  //置顶最上面窗口
            

            console.log(this.seachitem,'s搜索页传来的信息');
             //进入页面就生成一个时间戳
             this.starttime = new Date().valueOf()    

            // //接收路由传参的参数
            // let itemidl = JSON.parse(this.$route.query.itemid)
            // if(itemidl!=null){
            //     this.shoppitem = itemidl
            // }
            
            //拿到商品详情表数据
            this.getGoodsData()

            // 拿到店家信息
            this.getHotel()

            // 查询收藏商品信息
            this.selectCollect()

            // 查询收藏店铺信息
            this.collectStore1()

            // 拿到评价内容
            this.contents()

            // 看了又看
            this.see()



           
        },




        beforeDestroy(){
            localStorage.setItem('a',1)
        //销毁离开页面时生成一个时间戳
        this.endtime = new Date().valueOf()   
        console.log(this.endtime,this.starttime,this.endtime-this.starttime,70)
        //如果停留的时间和离开的时间差大于7秒，并且有登录就执行插入浏览记录的方法
        if(this.endtime-this.starttime>=7000 && this.userTel!=null){     
            this.BrowsingHistory()
        }
    },
    // beforeUnload(){
    //     //销毁离开页面时生成一个时间戳
    //     this.endtime = new Date().valueOf()   
    //     console.log(this.endtime,this.starttime,this.endtime-this.starttime,70)

    //     //如果停留的时间和离开的时间差大于6秒，并且有登录就执行插入浏览记录的方法
    //     if(this.endtime-this.starttime>=6000 && this.userTel!=null){     
    //         this.BrowsingHistory()
    //     }
    // },
    }
</script>

<style scoped>

*{
    padding: 0;
    margin: 0;
}

.container{
    width: 90%;
    height: 1500px;
    margin: 0 auto;
    /* border: 1px solid black; */
}




.title>div{
    margin-left: 150px;
    
}

.content{
    display: flex;
    margin-top: 5px;
    justify-content: space-between;
    width: 100%;
    height: 900px;
    /* border:1px solid black */
}

/* 左侧 */
.left{
    width: 35%;
    height: 900px;
    /* border:1px solid black */
}

.left1>img{
    width: 100%;
    height: 500px;
}

.left2{
    width: 60%;
    margin-top: 20px;
   
}

.left2>ul{
    display: flex;
    justify-content: space-between;
    width: 120%;
    height: 60px;
}

.left2>ul>li{
    border: 1px solid black;
}

.left2>ul>li>img{
    width: 70px;
    height: 60px;
}

.left3{
    margin-top: 40px;
}


/*中间 */
.middle{
    width: 45%;
    height: 900px;
    /* border:1px solid black */
}
.middle>div:nth-child(1){
    font-size: 20px;
    font-weight: bold;
}

.middle>div:nth-child(2){
  margin-top: 10px;
}

.middle>div:nth-child(3){
    width: 100%;
    background-color: rgb(255, 242,232);
}

.middle>div:nth-child(3)>div{
  width:100% ;
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  height: 50px;
  line-height: 50px;
 
}

.middle>div:nth-child(4){
  height: 30px;
  line-height: 30px;
  background-color: rgb(255, 249,245);
}

.middle>div:nth-child(4)>div{
    width: 73%;
    display: flex;
    justify-content: space-around;
    margin-left: 15px;
}

.middle>div:nth-child(5){
    margin-left: 12px;
    display: flex;
    justify-content: space-around;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px dashed darkgrey;
}

.middle>div:nth-child(6){
    margin-top: 15px;
    width: 58%;
    display: flex;
    justify-content: space-around;

}

.middle>div:nth-child(7){
    margin-top: 20px;
    width: 58%;
    display: flex;
    justify-content: space-around;

}

/* 步进器 */
.middle>div:nth-child(8){
    margin-top: 25px;
    width: 70%;
    display: flex;
    justify-content: space-around;

}

/* 分期购买 */
.middle>div:nth-child(9){
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: space-around;

}

/* 购买按钮 */
.middle>div:nth-child(10){
    display: flex;
    justify-content: center;
    margin-top: 80px;
    
}

/* 承若 */
.middle>div:nth-child(11){
    width: 70%;
    margin-left: 45px;
    margin-top: 70px;
    
}

.middle>div:nth-child(12){
    width: 70%;
    margin-left: 45px;
    margin-top: 20px;
    
}

/* 右侧 */
.right{
    width: 15%;
    height: 900px;
    /* border:1px solid black */
}

.right1{
    width: 99%;
    height: 500px;
    border: 1px solid gold;
}

.right1>img{
    width: 100%;
    height: 110px;
}

.right1>div>p{
    margin-top: 20px;
    
}

.right1>div>p>span>img{
    width: 10%;
   
}

.right1>div>p>img{
    width: 90%;
    margin-top: 5px;
   
}

.right2>div:nth-child(1){
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
}

.right3{
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;  /* 超过自动换行 */
   
}

.right3>div{
    margin-top: 20px;
    width: 40%;
    height: 100px;
    /* border: 1px solid darkgray; */
}

.right3>div>img{
   width: 100%;
   height: 70px;
}

.right3>div>p{
   color: red;
   text-align: center;
}

/* 底部 */


/* 评价 */
.footer1{
    display: flex;
}

.footer1>div:nth-child(1){
    margin-left: 25px;
    width: 15%;
    height: 150px;
    border-bottom: 1px solid darkgrey;
}

.footer1>div:nth-child(2){
    width: 90%;
    height: 150px;
    border-bottom: 1px solid darkgrey;
}



.footer1>div:nth-child(1)>img:nth-child(1){
    margin-top: 20px;
    width: 50px;
    height: 50px;
    border-radius:25px
}

/* 评论图片 */
.img2{
    width: 50px;
    height: 50px;
    margin-top: 10px;
}

/* 用户等级 */
#img1{
    width: 30px;
    height: 15px;
   
}






/* 放大镜 ！！ */
*{ /* 清除默认样式 */
    padding: 0;
    margin: 0;
    border: 0;
}
.left1{/* 父容器的样式（此次宽高只要不是0，就不影响代码，是根据图片的宽高调整的）*/
    width:100%;
    height: 500px;
    background-color: skyblue;
    position: relative;
}
.even{ /*鼠标移入的地方*/
    width: 100%;
    height: 500px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 998;
}
.mask{/*遮罩层：父容器的一半  半透明  left + top ：调整遮罩层的初始位置*/
    width: 50%;
    height: 50%;
    background-color: greenyellow;
    opacity: .5;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}
img{/*小图：鼠标移入上去的图*/
    width: 100%;
    height: 100%;
}
.big{/*大图的父容器： left: 100% 让大图在小图的右侧显示，裁剪多余部分*/
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    border: 1px solid #aaa;
    overflow: hidden;
    z-index: 998;
    display: none;
}
.big img{/*大图：width + height 放大2倍*/
    width: 200%;
    height: 200%;
    position: absolute;
    left: 0;
    top: 0;
}
.left1:hover .mask,.left1:hover .big{ /*移入父容器显示：遮罩层 + 大图*/
    display: block;
}




</style>